<template>
  <div>
    <h1 style="color: red">这里是父组件</h1>
    <p>群消息girl：</p>
    <div>
      <span style="color: brown;font-size: 35px">子组件</span>{{ somebody }} 说: 我 <span style="color: blue">{{ age }}</span> 了。
    </div>
    <hr>
    <v-girl-group
      :girls="aGirls"
      :noticeGirl="noticeGirl"
      @introduce="introduceSelf"></v-girl-group>
  </div>
</template>

<script>
  import vGirlGroup from './GirlGroup'
  export default {
    name: 'girl',
    components: {
      vGirlGroup
    },
    data () {
      return {
        aGirls:[{
          name:'小丽',
          age:22
        },{
          name:'小美',
          age:21
        },{
          name:'小荷',
          age:24
        }],
        somebody:'',
        age:'[?岁]',
        noticeGirl:''
      }
    },
    methods: {
      introduceSelf (opt) {
        this.somebody = opt.name;
        this.age = opt.age;

        // 通知girl收到消息
        this.noticeGirl = opt.name + ',我已收到消息了';
      }
    }
  }

</script>

<style scoped>

</style>
